<%@ include file="/common/taglibs.jsp"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="order" tagdir="/WEB-INF/tags/order"%>
<%@ taglib prefix="system" tagdir="/WEB-INF/tags/system"%>
<%@ taglib uri="http://java.sun.com/jstl/xml" prefix="x"%>
<%@ page import  = "javax.xml.parsers.DocumentBuilder,
javax.xml.parsers.DocumentBuilderFactory,
javax.xml.parsers.*,
javax.xml.transform.*,
javax.xml.transform.dom.DOMSource,
javax.xml.transform.stream.StreamResult,
org.w3c.dom.*,
java.io.*
"%>
<probiz:pageHeading entityName="${orderExpress.orderExpressName}" entityHeadingKey="orderExpressDetail.heading" />
<content tag="buttons">
	<probiz:iconBtn btnType="save" onclick="ExpressTplEditor.save()" />
	<c:if test="${orderExpress.orderExpressId!=null}">
		<probiz:iconBtn btnType="delete" onclick="return fnDoDelete(this);" />
	</c:if>
	<probiz:iconBtn btnType="back" onclick="return fnDoCancelForm(this);" />
</content>
<probiz:showBindErrors bindPath="orderExpress.*" />
<c:set var="xmlData">
<printer picposition="0:0"><item><name><fmt:message key="order.express.consignor.username"/></name><ucode>dly_name</ucode><font></font><fontsize>14</fontsize><fontspace>0</fontspace><border>1</border><italic>0</italic><align>left</align><position>132:126:91:24</position></item><item><name>网店名称</name><ucode>shop_name</ucode><font></font><fontsize>12</fontsize><fontspace>0</fontspace><border>0</border><italic>0</italic><align>left</align><position>189:154:219:23</position></item><item><name>发货人-地址</name><ucode>dly_address</ucode><font></font><fontsize>12</fontsize><fontspace>0</fontspace><border>0</border><italic>0</italic><align>left</align><position>143:180:266:68</position></item><item><name>发货人-邮编</name><ucode>dly_zip</ucode><font></font><fontsize>12</fontsize><fontspace>8</fontspace><border>0</border><italic>0</italic><align>left</align><position>323:249:91:20</position></item><item><name>√</name><ucode>tick</ucode><font></font><fontsize>12</fontsize><fontspace>0</fontspace><border>0</border><italic>0</italic><align>left</align><position>181:270:26:21</position></item><item><name>收货人-姓名</name><ucode>ship_name</ucode><font></font><fontsize>14</fontsize><fontspace>0</fontspace><border>1</border><italic>0</italic><align>left</align><position>488:126:101:24</position></item><item><name>收货人-地址</name><ucode>ship_addr</ucode><font></font><fontsize>14</fontsize><fontspace>0</fontspace><border>1</border><italic>0</italic><align>left</align><position>490:181:293:68</position></item><item><name>收货人-电话</name><ucode>ship_tel</ucode><font></font><fontsize>14</fontsize><fontspace>0</fontspace><border>1</border><italic>0</italic><align>left</align><position>658:124:122:20</position></item><item><name>订单-物品数量</name><ucode>order_count</ucode><font></font><fontsize>12</fontsize><fontspace>0</fontspace><border>0</border><italic>0</italic><align>left</align><position>339:316:75:54</position></item><item><name>测试内容-物品名称</name><ucode>text</ucode><font></font><fontsize>12</fontsize><fontspace>0</fontspace><border>0</border><italic>0</italic><align>center</align><position>75:330:207:21</position></item><item><name>订单-备注</name><ucode>order_memo</ucode><font></font><fontsize>12</fontsize><fontspace>0</fontspace><border>0</border><italic>0</italic><align>left</align><position>483:393:289:32</position></item><item><name>收货人-地区2级</name><ucode>ship_area_2</ucode><font></font><fontsize>12</fontsize><fontspace>0</fontspace><border>1</border><italic>0</italic><align>left</align><position>480:251:73:21</position></item><item><name>当日日期-年</name><ucode>date_y</ucode><font></font><fontsize>12</fontsize><fontspace>0</fontspace><border>0</border><italic>0</italic><align>left</align><position>474:371:42:22</position></item><item><name>当日日期-月</name><ucode>date_m</ucode><font></font><fontsize>12</fontsize><fontspace>0</fontspace><border>0</border><italic>0</italic><align>left</align><position>532:371:29:20</position></item><item><name>当日日期-日</name><ucode>date_d</ucode><font></font><fontsize>12</fontsize><fontspace>0</fontspace><border>0</border><italic>0</italic><align>left</align><position>584:371:26:21</position></item><item><name>收货人-邮编</name><ucode>ship_zip</ucode><font></font><fontsize>12</fontsize><fontspace>8</fontspace><border>0</border><italic>0</italic><align>left</align><position>672:251:112:21</position></item><item><name>发货人-电话</name><ucode>dly_tel</ucode><font>undefined</font><fontsize>12</fontsize><fontspace>0</fontspace><border>0</border><italic>0</italic><align>left</align><position>289:122:120:20</position></item><item><name>发货人-手机</name><ucode>dly_mobile</ucode><font>undefined</font><fontsize>12</fontsize><fontspace>0</fontspace><border>0</border><italic>0</italic><align>left</align><position>289:138:120:20</position></item><item><name>收货人-手机</name><ucode>ship_mobile</ucode><font>undefined</font><fontsize>14</fontsize><fontspace>0</fontspace><border>1</border><italic>0</italic><align>left</align><position>658:144:124:20</position></item></printer>
</c:set>
<div class="top clearfix">
	<ul class="tab">
		<li class="curr"><span><fmt:message key="menu.viewOrderExpresss"/></span></li>
	</ul>
</div>
<div class="modify">
	<form:form method="post" cssClass="mainForm" id="orderExpress" commandName="orderExpress"
			action="${ctxPath}/order/orderExpress.html" onsubmit="return validateOrderExpress(this);">
		<form:hidden path="version" />
		<input type="hidden" name="orderExpressId" value="${orderExpress.orderExpressId}"/> 
		<input type="hidden" name="width" id="width" value="1000"/> 
		<input type="hidden" name="height" id="height" value="600"/> 
		<input id="templateData" name="templateData" type="hidden" value=""/>
		<table width="100%" border="0" cellspacing="0" cellpadding="0" class="com_modi_table">
		<tr>
			<th class="title"><h4><fmt:message key="orderExpress.group.basic"/></h4>
		</tr>
		<tr>
			<td>	
				<table cellSpacing="0" cellPadding="0" border="0" class="orderExpressToolArea">
					<tr>
						<th><label class="required" for="orderExpressName"><fmt:message key="order.express.templateName"/> (<span class="red">*</span>)</label>：</th>
						<td><input id="orderExpressName" type="text"  name="orderExpressName" value="${orderExpress.orderExpressName}" class="inputtxt" style="width:200px"/></td>
						<%--<th>配送方式：</th>
						<td>
						<select style="width:150px" name="shippingMethodId" id="shippingMethodId">
							<option value=""><fmt:message key="orderExpressDetail.shippingMethod.pleasSelect"/></option>
							<c:forEach var="shippingMethod" items="${shippingMethodList}">
								<option value="${shippingMethod.shippingMethodId}" <c:if test="${orderExpress.shippingMethodId eq shippingMethod.shippingMethodId}">selected="true"</c:if>>${shippingMethod.shippingMethodName}</option>
							</c:forEach>
						</select>
						</td>--%>
						<th><StoreAdmin:label key="orderExpress.status" />：</th>
						<td>
						<input type="checkbox" name="isShowCheck" id="isShowCheck" <c:if test="${empty orderExpress.status || orderExpress.status == 1}">checked</c:if>  onclick="if(this.checked){$('status').value=1;}else{$('status').value=0}"> <fmt:message key="order.express.active"/>
						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<StoreAdmin:label key="orderExpress.sortOrder" />
						<input type="hidden" name="status" id="status" value="${(empty orderExpress.status)?1:orderExpress.status}">
						<input type="text" value="${(empty orderExpress.sortOrder)?1:orderExpress.sortOrder}" style="width: 50px;" class="inputtxt" name="sortOrder" id="sortOrder" validconf="integer"/></td>
					</tr>
					<tr>
						<th><fmt:message key="order.express.backgroundImg"/>(<span class="red">*</span>)：</th>
						<td colspan="5"><input type="hidden" name="backgroundImageUrl" id="expressEditorBg" value="${orderExpress.backgroundImageUrl}" />
							<%-- 
							<input type="button" onclick="ExpressTplEditor.delBg()" value="删除" class="btn3"/>
							--%>
                    		<input type="checkbox" onclick="ExpressTplEditor.lockbg(this.checked)" checked="" id="lock_bg">
                    		<label for="lock_bg"><fmt:message key="order.express.block"/></label>
                    	</td>
					</tr>					
					<tr>
						<th><fmt:message key="order.express.theContentPrintEntry"/>(<span class="red">*</span>)：</th>
						<td>
							<div id="box-print-ctrl">
								<input type="button" name="addPrintContent" value="添加" class="btn3"/> <input type="button" onClick="ExpressTplEditor.delItem()" value="删除" class="btn3"/>
								<div style="display:none;" id="print_item_box">
									<%
									//读取xml的内容
									DocumentBuilderFactory dbf = DocumentBuilderFactory.newInstance();
									dbf.setIgnoringElementContentWhitespace(true);
									DocumentBuilder db = dbf.newDocumentBuilder();
									Document doc = db.parse(pageContext.getServletContext().getResourceAsStream("/pages/order/printElements.xml"));
									doc.normalize();
									NodeList items = doc.getElementsByTagName("item");
									for(int it=0;it<items.getLength();it++){
										NodeList subitems  = items.item(it).getChildNodes();
										String itemName=null;
										String itemCode=null;
										for(int i=0;i<subitems.getLength();i++){
											String nodeName1=subitems.item(i).getNodeName();
											if(nodeName1.equals("name")){
												itemName=subitems.item(i).getFirstChild().getNodeValue();
											}
											if(nodeName1.equals("ucode")){
												itemCode=subitems.item(i).getFirstChild().getNodeValue();
												out.print("<span onclick=\"ExpressTplEditor.addElement('"+itemCode+"','"+itemName+"')\" name=\"menuitem\">"+itemName+"</span>");
											}	
										}									
									}
									%>	
								</div>
							</div>							
						</td>
						<th><fmt:message key="order.express.fontSet"/>：</th>
						<td colspan="3">
							<select	onchange="if(this.value!='--')ExpressTplEditor.setFontSize(this.value);"  id="fontSize" name="fontSize">
								<option value="--">
									<fmt:message key="order.express.fontSize"/>
								</option>
								<option value="10">
									10
								</option>
								<option value="12">
									12
								</option>
								<option value="14">
									14
								</option>
								<option value="18">
									18
								</option>
								<option value="20">
									20
								</option>
								<option value="24">
									24
								</option>
								<option value="27">
									27
								</option>
								<option value="30">
									30
								</option>
								<option value="36">
									36
								</option>
							</select>
							<select onchange="if(this.value!='--') ExpressTplEditor.setFont(this.value);" id="font">
								<option value="--">
									<fmt:message key="order.express.fontType"/>
								</option>
								<option value="宋体">
									<fmt:message key="order.express.fontType.SongTi"/>
								</option>
								<option value="<fmt:message key='order.express.fontType.bold-face'/>">
									<fmt:message key="order.express.fontType.bold-face"/>
								</option>
								<option value="Arial">
									Arial
								</option>
								<option value="Verdana">
									Verdana
								</option>
								<option value="Serif">
									Serif
								</option>
								<option value="Cursive">
									Cursive
								</option>
								<option value="Fantasy">
									Fantasy
								</option>
								<option value="Sans-Serif">
									Sans-Serif
								</option>

							</select>
							<select onchange="if(this.value!='--') ExpressTplEditor.setFontSpace(this.value);" id="fontSpace" name="fontSpace">
								<option selected="selected" value="--">
									<fmt:message key="order.express.distance"/>
								</option>
								<option value="-4">
									-4
								</option>
								<option value="-2">
									-2
								</option>
								<option value="0">
									0
								</option>
								<option value="2">
									2
								</option>
								<option value="4">
									4
								</option>
								<option value="6">
									6
								</option>
								<option value="8">
									8
								</option>
								<option value="10">
									10
								</option>
								<option value="12">
									12
								</option>
								<option value="14">
									14
								</option>
								<option value="16">
									16
								</option>
								<option value="18">
									18
								</option>
								<option value="20">
									20
								</option>
								<option value="22">
									22
								</option>
								<option value="24">
									24
								</option>
								<option value="26">
									26
								</option>
								<option value="28">
									28
								</option>
								<option value="30">
									30
								</option>
							</select>
							<span onclick="ExpressTplEditor.setBorder()" class="sysiconBtnNoIcon">B</span>
							<span onclick="ExpressTplEditor.setItalic()" class="sysiconBtnNoIcon"><i>I</i></span>
							<span class="sysiconImg_l" id="editor-icon-left" onclick="ExpressTplEditor.setAlign('left')"><fmt:message key="order.express.font.left"/></span>
							<span class="sysiconImg_m" id="editor-icon-middel" onclick="ExpressTplEditor.setAlign('center')"><fmt:message key="order.express.font.center"/></span>
							<span class="sysiconImg_r" id="editor-icon-right" onclick="ExpressTplEditor.setAlign('right')"><fmt:message key="order.express.font.rigth"/></span>
						</td>
					</tr>
				</table> 
				
				<div id="expressTplEditor" class="express_tpl_editor">
				</div>
			</td>
		</tr>						
   	</table>
</form:form>
</div>

<v:javascript formName="orderExpress" staticJavascript="false" />
<script type="text/javascript">
    document.forms["orderExpress"].elements["orderExpressName"].focus();
</script>
<c:set var="now" value="<%=new java.util.Date().getTime()%>" />
<c:set var="plugin_swfObject" value="true" scope="request"/>
<script type="text/javascript">

var ExpressTplEditor = {
	tplEditor:null,
	screenDPI:96,
    setBorder:function(){
		this.tplEditor.flash( function() { this.setBorder(); } );
    },
    setItalic:function(){
        this.tplEditor.flash( function() { this.setItalic(); } );
    },
    setFontSize:function(fontSize){        
        this.tplEditor.flash( function() { this.setFontSize(fontSize); } ); 
    },
    setAlign:function(align){
        this.tplEditor.flash( function() { this.setAlign(align); } ); 
    },
    setFontSpace:function(fontSpace){
        this.tplEditor.flash( function() { this.setFontSpace(fontSpace); } ); 
    },
    delItem:function(){
        this.tplEditor.flash( function() { this.delItem(); } ); 
    },
    resize:function(){
        var size = {width:$('ipt_prt_tmpl_width').value.toInt()*this.screenDPI/25.4,height:$('ipt_prt_tmpl_height').value.toInt()*this.screenDPI/25.4};
        this.tplEditor.flash( function() { this.setStyles(size); } ); 
    },
    setPicture:function(url){
        this.tplEditor.flash( function() { this.setBg(url); } ); 
    },
    addElement:function(itemCode, itemName){
        this.tplEditor.flash( function() { this.addElement(itemCode, itemName); } ); 
        $j('#print_item_box').hide();
    },
	setData:function() {
    	return this.tplEditor.flash( function() { document.getElementById('templateData').value = this.getData(); });
    },
    save:function(){
    	if(!validateOrderExpress($('orderExpress'))){
    		return;
    	}
        if(!$('expressEditorBg').value){
            alert("<fmt:message key='order.express.uploadbackgroundImg'/>");
            return;
        }
        try
		{
		   this.tplEditor.flash( function() { this.getData(); });;
		}
		catch(err)
		{
		   alert("<fmt:message key='order.express.addContentEntryTip'/>");
		   return;
		}
        this.setData();
		return fnDoSave(this);       
    },
    setFont:function(font){
        this.tplEditor.flash( function() { this.setFont(font); } ); 
    },
    lockbg:function(checked){
        this.tplEditor.flash( function() { this.lockBg(); } ); 
    },
    delBg:function(){
        if($j('#expressEditorBg').length!=0){
            $j('#expressEditorBg').val('__none__');
        }else{
            $j("#orderExpress").add('<input id="expressEditorBg" name="backgroundImageUrl" type="hidden" value="__none__" />');
        }
        this.tplEditor.flash( function() { this.delBg(); } ); 
    }
};

</script>

<probiz:plugin_newUpload fileInputId="expressEditorBg" fileDesc="JPG files" fileExt="*.jpg;*.png;*.gif;*.JPG"	uploadCategory="order"  onComplete="uploadBgImagehandler"/>
<v:javascript formName="orderExpress" staticJavascript="false" />	
<script type="text/javascript">

function uploadBgImagehandler(mediaUrl){	
	ExpressTplEditor.setPicture(__mediaPath+mediaUrl);	
	$("expressEditorBg").value = __mediaPath+mediaUrl;		  
}

<c:if test="${not empty orderExpress.backgroundImageUrl}">
<c:set var="backgroundImageUrlTemp">__mediaPath+'/'+'${orderExpress.backgroundImageUrl}'</c:set>
</c:if>

$j(document).ready(function(){
	ExpressTplEditor.tplEditor = $j("#expressTplEditor");
	ExpressTplEditor.tplEditor.flash({
		 swf: '${ctxPath}/images/printer.swf?${now}',
		 width: '100%',
		 height: '100%',
		 wmode: 'opaque',
		 flashvars: {data:'${(empty orderExpress.templateData)?null:orderExpress.templateData}',bg:${orderExpress.backgroundImageUrl==null?'null':backgroundImageUrlTemp},copyright:'probiz'},
	}); 
	
	var cElements=$('print_item_box').getElementsByTagName('span');
	for (var i=0;i<cElements.length;i++){    
		cElements[i].onmouseover=function(e){this.className='overLight';}
		cElements[i].onmouseout=function(e){this.className='';}
	}
	  $j("input[name=addPrintContent]").click(function () {
	      $j("#print_item_box").toggle();
	  });
		
});
</script>
